const data=[{
    'title':'大1',
    children:[{
     'desc':'二级1'
    }]
},{
    'title':'大2',
    children:[{
        'desc':'二级2'
       }]
},{
    'title':'大3',
    children:[{
        'desc':'二级3'
       }]
},{
    'title':'大4',
    children:[{
        'desc':'二级4'
       }]
},
]
// 获取节点
const ulist:Element|null=document.querySelector('.ulist');
const olist:Element|null=document.querySelector('.olist');
// 渲染
(ulist as Element).innerHTML=data.map((v,i)=>{
    return ` <li className="${i===0 ? 'active':''}">${v.title}</li>`
}).join('');
(olist as Element).innerHTML=data.map((v,i)=>{
    return v.children.map((item,index)=>{
        return ` <li  className="${i===0 ? 'active':''}">${item.desc}</li>`
    })
}).join('')
// 伪数组转数组
 let Arrulist:Element[]|null=Array.from(document.querySelectorAll('.ulist li'))
//  let Arrolist:Element[]|null=Array.from(document.querySelectorAll('.olist li'))
//  console.log(Arrolist)
// 循环遍历
Arrulist.forEach((v,i)=>{
    // 添加点击事件
    v.addEventListener('click',e=>{
        // 删除高亮
        document.querySelector('.ulist .active')?.classList?.remove('active')
        // 添加高亮
        v.classList.add('active')
        // 删除高亮
        document.querySelector('.olist .active')?.classList.remove('active')
       // 添加高亮
        olist?.children[i].classList.add('active')
    })
})